
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户注册</title>
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>
<body>
<div class="container">
    <div style="width: 300px;margin: 10px auto">
        <form method="post" action="upload">
            <div style="width: 300px;height: 300px;border: 1px dashed #ccc">
                <img src="#" id="xx" width="300px" height="300px">
            </div>
            <div style="margin-top: 20px">
                <input type="hidden" name="imgbase64" id="b64"/>
                <input id="img" type="file" style="display: none">
                <label for="img" class="btn btn-primary">打开</label>
            </div>
            <div style="margin-top: 20px">
                <input type="submit" value="提交" class="btn btn-danger btn-block">
            </div>
        </form>
    </div>
</div>
<script>
    var fileImage = document.getElementById("img");
    fileImage.onchange = function () {
        console.log(this.files[0]);
        var reader = new FileReader();
        reader.onload = function (e) {
            var xx = document.getElementById("xx");
            xx.src = e.target.result;
            document.getElementById("b64").value = e.target.result;
        }
        reader.readAsDataURL(this.files[0]);
    }

</script>
</body>
</html>